<template>
    <div>

      <div id="weatherDiv" class="demo"></div>

      <div class="demo" id="weatherDemo">

        <div id="yu-qing" class="dom" :class="{showN: true}">
          <h4 name="title"></h4>
            <div class="icon sun-shower">
              <div class="cloud"></div>
              <div class="sun">
                <div class="rays"></div>
              </div>
              <div class="rain"></div>
            </div>
          <h4 name="temperature"></h4>
        </div>

        <div id="yin-qing" class="dom" :class="{showN: true}">
          <h4 name="title"></h4>
            <div class="icon sun-shower">
              <div class="cloud"></div>
              <div class="sun">
                <div class="rays"></div>
              </div>
            </div>
          <h4 name="temperature"></h4>
        </div>

        <div id="lei" class="dom" :class="{showN: true}">
          <h4 name="title"></h4>
            <div class="icon thunder-storm">
              <div class="cloud"></div>
              <div class="lightning">
                <div class="bolt"></div>
                <div class="bolt"></div>
              </div>
            </div>
          <h4 name="temperature"></h4>
        </div>

        <div id="yin" class="dom" :class="{showN: true}">
          <h4 name="title"></h4>
            <div class="icon cloudy">
              <div class="cloud"></div>
              <div class="cloud"></div>
            </div>
          <h4 name="temperature"></h4>
        </div>

        <div id="xue" class="dom" :class="{showN: true}">
          <h4 name="title"></h4>
            <div class="icon flurries">
              <div class="cloud"></div>
              <div class="snow">
                <div class="flake"></div>
                <div class="flake"></div>
              </div>
            </div>
          <h4 name="temperature"></h4>
        </div>

        <div id="qing" class="dom" :class="{showN: true}">
          <h4 name="title"></h4>
            <div class="icon sunny">
              <div class="sun">
                <div class="rays"></div>
              </div>
            </div>
          <h4 name="temperature"></h4>
        </div>

        <div id="yu" class="dom" :class="{showN: true}">
          <h4 name="title"></h4>
            <div class="icon rainy">
              <div class="cloud"></div>
              <div class="rain"></div>
            </div>
          <h4 name="temperature"></h4>
        </div>

      </div>

    </div>
</template>

<script>

const weather_appid = '69612313';
const weather_appsecret = 'RGr9hMEB';
const weather_url = 'https://www.tianqiapi.com/api/';
const weather_version = 'v1';
const weather_cityId = '101160101';
const weather_city = '兰州';
import axios from 'axios'
export default {
  name: 'Weather',
  data() {
    return{
      sData: {},
      sDict: {'晴':'qing', '晴转多云':'yin-qing', '多云转晴':'yin-qing', '多云':'yin', '小雨':'yu'}
    }
  },
  mounted: function () {
    this.getWeatherData();
    this.intWeatherBySevenDay();
  },
  methods: {
    intWeatherBySevenDay(){
      let that = this;
      setInterval(()=>{
        that.getWeatherData();
      }, 1800000);

    },
    getWeatherData(){
      let that = this;
      axios.get(weather_url,{
        params: {
          appid: weather_appid,
          appsecret: weather_appsecret,
          version: weather_version,
          cityid: weather_cityId,
          city: weather_city
        }
      }).then(function (response) {
        that.sData = response.data;
        document.getElementById('weatherDiv').innerHTML='';
        for (let day of that.sData.data)  {
          let el_$ = document.getElementById(that.sDict[day.wea]==undefined?'yin-qing':that.sDict[day.wea]);
          let el = el_$.cloneNode(true);
          el.childNodes[0].innerHTML = day.day.split("（")[0];
          el.childNodes[2].innerHTML = day.tem;
          el.classList.remove('showN');
          document.getElementById('weatherDiv').appendChild(el);
        }
      }).catch(function (error) {
        console.log(error);
      })
    }
  }

}
</script>

<style lang="less">
  #weatherDiv {
    transform: scale(0.2);
    max-width: 90em;
    padding: 0em;
    margin: 0 auto;
    color: #000c31;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    background-color: currentColor;
  }
  .dom {
    display: inline-block;
  }
  h4 {
    color: white;
    font-size: 75px;
    font-weight: normal;
    position: relative;
    margin-bottom: -10px;
    margin-top: -25px;
    text-align: center;
  }
  .showN {
    display: none !important;
  }

  .showY {
    display: block !important;
  }

  .icon {
    position: relative;
    display: inline-block;
    width: 12em;
    height: 10em;
    font-size: 1em; /* control icon size here */
  }

  .cloud {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 3.6875em;
    height: 3.6875em;
    margin: -1.84375em;
    background: currentColor;
    border-radius: 50% !important;
    box-shadow:
      -2.1875em 0.6875em 0 -0.6875em,
      2.0625em 0.9375em 0 -0.9375em,
      0 0 0 0.375em #fff,
      -2.1875em 0.6875em 0 -0.3125em #fff,
      2.0625em 0.9375em 0 -0.5625em #fff;
  }
  .cloud:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: -0.5em;
    display: block;
    width: 4.5625em;
    height: 1em;
    background: currentColor;
    box-shadow: 0 0.4375em 0 -0.0625em #fff;
  }
  .cloud:nth-child(2) {
    z-index: 0;
    background: #fff;
    box-shadow:
      -2.1875em 0.6875em 0 -0.6875em #fff,
      2.0625em 0.9375em 0 -0.9375em #fff,
      0 0 0 0.375em #fff,
      -2.1875em 0.6875em 0 -0.3125em #fff,
      2.0625em 0.9375em 0 -0.5625em #fff;
    opacity: 0.3;
    transform: scale(0.5) translate(6em, -3em);
    animation: cloud 4s linear infinite;
  }
  .cloud:nth-child(2):after { background: #fff; }

  .sun {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.5em;
    height: 2.5em;
    margin: -1.25em;
    background: currentColor;
    border-radius: 50% !important;
    box-shadow: 0 0 0 0.375em #fff;
    animation: spin 12s infinite linear;
  }
  .rays {
    position: absolute;
    top: -2em;
    left: 50%;
    display: block;
    width: 0.375em;
    height: 1.125em;
    margin-left: -0.1875em;
    background: #fff;
    border-radius: 0.25em !important;
    box-shadow: 0 5.375em #fff;
  }
  .rays:before,
  .rays:after {
    content: '';
    position: absolute;
    top: 0em;
    left: 0em;
    display: block;
    width: 0.375em;
    height: 1.125em;
    transform: rotate(60deg);
    transform-origin: 50% 3.25em;
    background: #fff;
    border-radius: 0.25em !important;
    box-shadow: 0 5.375em #fff;
  }
  .rays:before {
    transform: rotate(120deg);
  }
  .cloud + .sun {
    margin: -2em 1em;
  }

  .rain,
  .lightning,
  .snow {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 3.75em;
    height: 3.75em;
    margin: 0.375em 0 0 -2em;
    background: currentColor;
  }

  .rain:after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    width: 1.125em;
    height: 1.125em;
    margin: -1em 0 0 -0.25em;
    background: #0cf;
    border-radius: 100% 0 100% 100%;
    box-shadow:
      0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
      -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
        -1.375em -0.125em 0 rgba(255,255,255,0.2);
    transform: rotate(-28deg);
    animation: rain 3s linear infinite;
  }

  .bolt {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -0.25em 0 0 -0.125em;
    color: #fff;
    opacity: 0.3;
    animation: lightning 2s linear infinite;
  }
  .bolt:nth-child(2) {
    width: 0.5em;
    height: 0.25em;
    margin: -1.75em 0 0 -1.875em;
    transform: translate(2.5em, 2.25em);
    opacity: 0.2;
    animation: lightning 1.5s linear infinite;
  }
  .bolt:before,
  .bolt:after {
    content: '';
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    margin: -1.625em 0 0 -1.0125em;
    border-top: 1.25em solid transparent;
    border-right: 0.75em solid;
    border-bottom: 0.75em solid;
    border-left: 0.5em solid transparent;
    transform: skewX(-10deg);
  }
  .bolt:after {
    margin: -0.25em 0 0 -0.25em;
    border-top: 0.75em solid;
    border-right: 0.5em solid transparent;
    border-bottom: 1.25em solid transparent;
    border-left: 0.75em solid;
    transform: skewX(-10deg);
  }
  .bolt:nth-child(2):before {
    margin: -0.75em 0 0 -0.5em;
    border-top: 0.625em solid transparent;
    border-right: 0.375em solid;
    border-bottom: 0.375em solid;
    border-left: 0.25em solid transparent;
  }
  .bolt:nth-child(2):after {
    margin: -0.125em 0 0 -0.125em;
    border-top: 0.375em solid;
    border-right: 0.25em solid transparent;
    border-bottom: 0.625em solid transparent;
    border-left: 0.375em solid;
  }

  .flake:before,
  .flake:after {
    content: '\2744';
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -1.025em 0 0 -1.0125em;
    color: #fff;
    list-height: 1em;
    opacity: 0.2;
    animation: spin 8s linear infinite reverse;
  }
  .flake:after {
    margin: 0.125em 0 0 -1em;
    font-size: 1.5em;
    opacity: 0.4;
    animation: spin 14s linear infinite;
  }
  .flake:nth-child(2):before {
    margin: -0.5em 0 0 0.25em;
    font-size: 1.25em;
    opacity: 0.2;
    animation: spin 10s linear infinite;
  }
  .flake:nth-child(2):after {
    margin: 0.375em 0 0 0.125em;
    font-size: 2em;
    opacity: 0.4;
    animation: spin 16s linear infinite reverse;
  }


  /* Animations */

  @keyframes spin {
    100% { transform: rotate(360deg); }
  }

  @keyframes cloud {
    0% { opacity: 0; }
    50% { opacity: 0.3; }
    100% {
      opacity: 0;
      transform: scale(0.5) translate(-200%, -3em);
    }
  }

  @keyframes rain {
    0% {
      background: #0cf;
      box-shadow:
        0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
        -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
          -1.375em -0.125em 0 #0cf;
    }
    25% {
      box-shadow:
        0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
        -0.875em 1.125em 0 -0.125em #0cf,
          -1.375em -0.125em 0 rgba(255,255,255,0.2);
    }
    50% {
      background: rgba(255,255,255,0.3);
      box-shadow:
        0.625em 0.875em 0 -0.125em #0cf,
        -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
          -1.375em -0.125em 0 rgba(255,255,255,0.2);
    }
    100% {
      box-shadow:
        0.625em 0.875em 0 -0.125em rgba(255,255,255,0.2),
        -0.875em 1.125em 0 -0.125em rgba(255,255,255,0.2),
          -1.375em -0.125em 0 #0cf;
    }
  }

  @keyframes lightning {
    45% {
      color: #fff;
      background: #fff;
      opacity: 0.2;
    }
    50% {
      color: #0cf;
      background: #0cf;
      opacity: 1;
    }
    55% {
      color: #fff;
      background: #fff;
      opacity: 0.2;
    }
  }
</style>

